<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="T3Store.searchForm" :FormConfig />

    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-input allowClear style="width:90%" v-model:value="T3Store.searchForm.putInfo" placeholder="试管编号" />
        <a-button @click="T3Store.getTestTubeTrace">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
</a-input-group> -->

    <a-card>
        <a-result status="info" title="暂无数据" v-if="!T3Store.traceArr.length" />
        <a-row v-else>
            <a-col v-for="item in T3Store.traceArr" :span="T3Store.traceArr.length == 1 ? 24 : 12">
                <a-timeline mode="alternate" :pending="item.length == 1">
                    <template v-for="record in item">
                        <a-timeline-item color="#9d7dff" v-if="record.title == '放样'">
                            <p class="infoTitle">
                                <a-tag color="#9d7dff">
                                    {{ record.title }}
                                </a-tag>
                                {{ record.Time }}
                            </p>
                            <p>
                                放样设备：
                                <a-tag color="#9d7dff">
                                    {{ record.deviceName }}
                                </a-tag>
                            </p>
                            <p>
                                序列号：
                                <a-tag color="processing">
                                    {{ record.serial }}
                                </a-tag>
                            </p>
                            <p>
                                详情：
                                <a-image class="infoImg" :src="record.src" :preview="{ src: record.src }" />
                            </p>
                        </a-timeline-item>
                        <a-timeline-item color="#87d068" v-else>
                            <p class="infoTitle">
                                <a-tag color="#87d068">
                                    {{ record.title }}
                                </a-tag>
                                {{ record.Time }}
                            </p>
                            <p>
                                取样人：{{ record.department }}
                                <a-tag color="processing">
                                    {{ record.name }}
                                </a-tag>
                            </p>
                            <p>
                                详情：
                                <a-image class="infoImg" :src="record.src" :preview="{ src: record.src }" />
                            </p>
                        </a-timeline-item>
                    </template>
                </a-timeline>
            </a-col>

        </a-row>
        <!-- <Tree v-else mode="top" :height="500" :data="T3Store.data" @changeVisible="T3Store.changeVisible" /> -->
    </a-card>
</template>
<script lang='ts' setup>
import { SearchOutlined } from '@ant-design/icons-vue'
import { provide, onUnmounted, inject, ref, type Ref, reactive } from 'vue'
import { useCommon } from '@/stores/Common'
import { useTestTubeTrace } from '@/stores/TestTubeTrace'
import { searchConfig, searchSelfConfig } from '@/config/TestTubeTrace'

import { createForm } from '@/utils/CreateForm'
import { createBtns } from '@/utils/createPermissionBtns'

import { debounce } from 'lodash'

const CommonStore = useCommon()
const T3Store = useTestTubeTrace()
const { FormConfig } = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'right', layout: 'inline', labelCol: { span: 5 } },)



provide('permissionBtns', createBtns({
    query: debounce(() => {
        T3Store.searchForm.pageNo = 1
        T3Store.getTestTubeTrace()
    }, 1000)
}))

onUnmounted(() => {
    T3Store.$reset()
})

</script>
<style lang='scss' scoped>
@media screen and (min-width:768px) {
    .infoTitle {
        font-size: .25rem;
    }

    :deep(.infoImg) {
        width: 1rem;
        height: 1rem;
        vertical-align: top
    }
}

@media screen and (max-width:768px) {
    .infoTitle {
        font-size: 12px;
    }

    :deep(.infoImg) {
        width: 80px;
        height: 80px;
        vertical-align: top
    }
}
</style>